<template>
  <div class="app-container">
    <Ht-search-form
      :dictMap="dictMap"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="advOptions"
      permission="user:configInfo:view"
    ></Ht-search-form>
    <ht-table
      ref="dataTable"
      :dictMap="dictMap"
      :tableBindColumns="tableBindColumns"
      :queryParams="queryParams"
      :reqConfig="regConfig"
      @handleSelectionChange="handleSelectionChange"
    >
    </ht-table>
  </div>
</template>

<script>
import { listPageMixin } from "@/libs/listPageMixin";
import { apiUrlConfig, listLoginLog } from "@/api/authority_app/log/loginInfo";

export default {
  name: "loginInfo",
  mixins: [listPageMixin],
  components: {},
  data() {
    return {
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        orderByColumn: "",
        isAsc: "asc",
        ipaddr: "",
        loginName: "",
        status: "",
        beginTime: "",
        endTime: "",
      },
      formOptions: [],
      advOptions: [],
      searchFormDictList: ["sys_yes_no", "SUCCESS_FAIL_STATUS"],
      regConfig: apiUrlConfig,
      // 列信息
      tableBindColumns: [
        { label: this.lang("authority.loginInfo.form.id"), prop: "id" },
        {
          label: this.lang("authority.loginInfo.form.loginName"),
          prop: "loginName",
        },
        { label: this.lang("authority.loginInfo.form.ipaddr"), prop: "ipaddr" },
        {
          label: this.lang("authority.loginInfo.form.loginLocation"),
          prop: "loginLocation",
          visible: false,
        },
        { label: this.lang("authority.loginInfo.form.browser"), prop: "browser" },
        { label: this.lang("authority.loginInfo.form.os"), prop: "os" },
        {
          label: this.lang("authority.loginInfo.form.status"),
          prop: "status",
          dictCode: "SUCCESS_FAIL_STATUS",
        },
        { label: this.lang("authority.loginInfo.form.msg"), prop: "msg" },
        {
          label: this.lang("authority.loginInfo.form.loginTime"),
          prop: "loginTime",
          width: "180",
        },
      ],
    };
  },
  mounted() {
    const formOptions = [
      // 普通搜索
      {
        type: "input",
        prop: "ipaddr",
        defaultAttr: {
          label: this.lang("authority.loginInfo.form.ipaddr"),
          placeholder: this.lang("authority.loginInfo.rules.ipaddrPLH"),
        },
      },
      {
        type: "input",
        prop: "loginName",
        defaultAttr: {
          label: this.lang("authority.loginInfo.form.loginName"),
          placeholder: this.lang("authority.loginInfo.rules.loginNamePLH"),
        },
      },
      {
        type: "dict",
        dict: "sys_yes_no",
        prop: "status",
        defaultAttr: {
          label: this.lang("authority.loginInfo.form.loginState"),
          placeholder: this.lang("authority.loginInfo.rules.loginStatePLH"),
        },
      },
    ];
    const advOptions = [
      {
        type: "dates",
        nameObj: {
          startTimeName: "beginTime",
          endTimeName: "endTime",
        },
        defaultAttr: {
          size: "small",
          label: this.lang("authority.loginInfo.form.operateTime"),
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd",
          placeholder: [
            this.lang("authority.loginInfo.rules.beginPLH"),
            this.lang("authority.loginInfo.rules.endPLH"),
          ],
        },
      },
    ];
    this.formOptions = formOptions;
    this.advOptions = advOptions;
  },
  methods: {
    listReq(queryParams) {
      return listLoginLog(queryParams);
    },
    // 字典状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.dataTable.doQuery(true);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.beginTime = "";
      this.queryParams.endTime = "";
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.dictId);
    },
  },
};
</script>
